<template>
  <div id="app" class="app-container">
    <router-view />
    <Spin class="app-loading" size="large" fix v-show="spinShow"></Spin>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['loading'])
  },
  data() {
    return {
      spinShow: ''
    }
  },
  watch: {
    loading() {
      if (!this.loading) {
        this.spinShow = false
      } else {
        this.spinShow = true
      }
    }
  }
}
</script>
<style lang="scss">
.app-container {
  height: 100%;
  overflow: hidden;
  .app-loading {
    z-index: 999999;
    background-color: rgba($color: #000000, $alpha: 0);
  }
}
</style>
